<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                xmlns:f="http://java.sun.com/jsf/core"
                template="/templates/mainLayout.xhtml">

    <ui:define name="title">Quản lý giao dịch</ui:define>
    <ui:define name="content">
        <p:messages id="msgs"/>
        <style type="text/css">
            .colStyle1 {
                vertical-align: top;
                width: 20%;
            }
            .colStyle2 {
                vertical-align: top;
            }
        </style>
        <h:form id ="contentForm">
            <h:panelGrid columns="2" cellpadding="5" width="100%" columnClasses="colStyle1, colStyle2">
                <ui:include src="/templates/menu.xhtml"/>

                <p:tabView dynamic="true" cache="true">
                    <p:tab title="Giao dịch nạp tiền">
                        <p:panel id="inParameterPanel" header="Tham số">
                            <h:panelGrid columns="2" cellpadding="5">
                                <h:outputLabel value="Từ ngày" />
                                <p:calendar value="#{transactionBean.inTransactionFromDate}" locale="#{languageBean.currentLocale}" 
                                            pattern="dd/MM/yyyy"/>

                                <h:outputLabel value="Đến ngày" />
                                <p:calendar value="#{transactionBean.inTransactionToDate}" locale="#{languageBean.currentLocale}" 
                                            pattern="dd/MM/yyyy"/>

                                <h:outputLabel value=""/>
                                <p:commandButton action="#{transactionBean.searchInTransaction}" update="inTransactionPanel"
                                                 value="Tìm kiếm"/>
                            </h:panelGrid>
                        </p:panel>

                        <p:panel id="inTransactionPanel" header="Giao dịch nạp tiền" style="margin-top: 2px;">
                            <p:dataTable var="transaction" value="#{transactionBean.inTransactionList}" paginator="true" rows="10"
                                         paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"  
                                         rowsPerPageTemplate="10,20,30">
                                <f:facet name="header">Giao dịch</f:facet>
                                <p:column>
                                    <f:facet name="header">
                                        <h:outputText value="Ngày giờ nạp" />
                                    </f:facet>
                                    <h:outputText value='#{utilBean.formatDate(transaction.transactionDate, "dd/MM/yyyy HH:mm:ss")}'/>  
                                </p:column>
                                <p:column>
                                    <f:facet name="header">
                                        <h:outputText value="Số Vxu" />
                                    </f:facet>
                                    <h:outputText value='#{transaction.amount}'/>  
                                </p:column>
                                <p:column>
                                    <f:facet name="header">
                                        <h:outputText value="Phương thức nạp" />
                                    </f:facet>
                                    <h:outputText value='#{transaction.source}'/>  
                                </p:column>
                            </p:dataTable>
                        </p:panel>
                    </p:tab>

                    <p:tab title="Giao dịch chơi game">
                        <p:panel id="outParameterPanel" header="Tham số">
                            <h:panelGrid columns="2" cellpadding="5">
                                <h:outputLabel value="Từ ngày" />
                                <p:calendar value="#{transactionBean.outTransactionFromDate}" locale="#{languageBean.currentLocale}" 
                                            pattern="dd/MM/yyyy"/>

                                <h:outputLabel value="Đến ngày" />
                                <p:calendar value="#{transactionBean.outTransactionToDate}" locale="#{languageBean.currentLocale}" 
                                            pattern="dd/MM/yyyy"/>

                                <h:outputLabel value=""/>
                                <p:commandButton action="#{transactionBean.searchOutTransaction}" update="outTransactionPanel"
                                                 value="Tìm kiếm"/>
                            </h:panelGrid>
                        </p:panel>

                        <p:panel id="outTransactionPanel" header="Giao dịch chơi game" style="margin-top: 2px;">
                            <p:dataTable var="transaction" value="#{transactionBean.outTransactionList}" paginator="true" rows="10"
                                         paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"  
                                         rowsPerPageTemplate="10,20,30">
                                <f:facet name="header">Giao dịch</f:facet>
                                <p:column>
                                    <f:facet name="header">
                                        <h:outputText value="Ngày giờ chơi" />
                                    </f:facet>
                                    <h:outputText value='#{utilBean.formatDate(transaction.transactionDate, "dd/MM/yyyy HH:mm:ss")}'/>  
                                </p:column>
                                <p:column>
                                    <f:facet name="header">
                                        <h:outputText value="Số Vxu" />
                                    </f:facet>
                                    <h:outputText value='#{transaction.amount}'/>  
                                </p:column>
                                <p:column>
                                    <f:facet name="header">
                                        <h:outputText value="Game" />
                                    </f:facet>
                                    <h:outputText value='#{transaction.source}'/>  
                                </p:column>
                            </p:dataTable>
                        </p:panel>
                    </p:tab>
                </p:tabView>
            </h:panelGrid>
        </h:form>
    </ui:define>
</ui:composition>